<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="col-sm-12 view"> <div class="main"> <div class="col-sm-5 top-wel">Test Your Responsive Website !!</div> <div class="col-sm-2 box"> <div class="col-sm-2 device" onclick="a()"><i class="fa fa-desktop" style="font-size:20px;"></i></div> <div class="col-sm-2 device" onclick="b()"><i class="fa fa-tablet" style="font-size:20px; -webkit-transform:rotate(90deg);"></i></div> <div class="col-sm-2 device" onclick="c()"><i class="fa fa-tablet" style="font-size:20px;"></i></div> <div class="col-sm-2 device" onclick="d()"><i class="fa fa-mobile" style="font-size:20px; -webkit-transform:rotate(90deg);"></i></div> <div class="col-sm-2 device" onclick="e()"><i class="fa fa-mobile" style="font-size:20px;"></i></div> </div> <div class="col-sm-4 box"> </div> <div class="col-sm-1 check" onclick="a()">auto            ▼ <div class="col-sm-12 check-in" style="margin-top:20px;" onmouseover="f()">280 px</div> <div class="col-sm-12 check-in" onmouseover="g()">320 px</div> <div class="col-sm-12 check-in" onmouseover="e()">480 px</div> <div class="col-sm-12 check-in" onmouseover="i()">568 px</div> <div class="col-sm-12 check-in" onmouseover="j()">768 px</div> <div class="col-sm-12 check-in" onmouseover="k()">1024 px</div> <div class="col-sm-12 check-in" onmouseover="l()">1190 px</div> <div class="col-sm-12 check-in" onmouseover="m()">1300 px</div> </div> </div> </div><iframe src="YOUR OFFLINE URL HERE" height="100%" id="respons" class="site"></iframe>

body { margin:0; padding:0 0 0 0; background:-webkit-radial-gradient(circle , #3d3d3d , #000); overflow: hidden; height: 100%; } .main { margin: auto; padding: 0; width: 97%; } .box { margin: 0; padding: 0; } .view { margin: 0; padding: 6px; background-color: #2a2a2a; position: fixed; height: 43px; } .check { margin: 2px 0 0 0; padding: 5px 5px 5px 10px; background-color:#2a2a2a; font-family: "arial"; font-size: 14px; text-transform: capitalize; outline:1px solid #000; border: 1px solid #474747; color: #ccc; background-image:url(../images/arrow.png); background-repeat: no-repeat; background-position: right; cursor: pointer; } .check-in { margin: 2px 0 0 0; padding: 5px 5px 5px 10px; background-color:#2a2a2a; font-family: "arial"; font-size: 14px; text-transform: capitalize; color: #ccc; z-index: 1; position: relative; display: none; cursor: pointer; } .check-in:hover { margin: 2px 0 0 0; padding: 5px 5px 5px 10px; background-color:#2a2a2a; font-family: "arial"; font-size: 14px; text-transform: capitalize; color: #fff; z-index: 1; position: relative; display: none; cursor: pointer; } .check:hover .check-in { display: block; animation-name:pawan; animation-duration:0.5s; animation-fill-mode:forwards; } @keyframes pawan { from {display: block; margin: 50px;} from {display: block; margin: 0px;} } .device { margin: 0; padding:5px; background: -webkit-linear-gradient(#292929 , #1d1d1d); border-radius: 2px; cursor: pointer; color:#fff; text-align:center; box-shadow: inset 0 0 2px #000; } .device:hover { margin: 0; padding:5px; background: -webkit-linear-gradient(#1d1d1d , #292929); border-radius: 2px; cursor: pointer; } .top-wel { margin: 8px 0 0 0; padding: 0; color: #ccc; font-family: "arial"; text-transform: capitalize; font-size: 16px; } iframe { border:none; background-color: #fff; height: 619px; } .site { margin: 43px 0 0 0; padding: 0; overflow: hidden; width: 100%; -webkit-transition:0.5s; } @media (max-width: 1330px) and (min-width: 10px){ .view{display: none;} .site{margin: 0;} }

function a(){ document.getElementById("respons").style.width ="100%"; document.getElementById("respons").style.margin ="43px 0 0 0"; document.getElementById("respons").style.height ="619px"; document.getElementById("respons").style.overflowY ="auto"; } function b(){ document.getElementById("respons").style.width ="1265px"; document.getElementById("respons").style.margin ="80px 0 30px 4%"; document.getElementById("respons").style.height ="530px"; document.getElementById("respons").style.overflowY ="scroll"; } function c(){ document.getElementById("respons").style.width ="795px"; document.getElementById("respons").style.margin ="80px 0 30px 20%"; document.getElementById("respons").style.height ="550px"; document.getElementById("respons").style.overflowY ="scroll"; } function d(){ document.getElementById("respons").style.width ="660px"; document.getElementById("respons").style.margin ="170px 0 30px 25%"; document.getElementById("respons").style.height ="350px"; document.getElementById("respons").style.overflowY ="scroll"; } function e(){ document.getElementById("respons").style.width ="400px"; document.getElementById("respons").style.margin ="90px 0 30px 35%"; document.getElementById("respons").style.height ="500px"; document.getElementById("respons").style.overflowY ="scroll"; } function f(){ document.getElementById("respons").style.width ="280px"; document.getElementById("respons").style.margin ="90px 0 30px 39%"; document.getElementById("respons").style.height ="500px"; document.getElementById("respons").style.overflowY ="scroll"; } function g(){ document.getElementById("respons").style.width ="320px"; document.getElementById("respons").style.margin ="90px 0 30px 38%"; document.getElementById("respons").style.height ="500px"; document.getElementById("respons").style.overflowY ="scroll"; } function i(){ document.getElementById("respons").style.width ="568px"; document.getElementById("respons").style.margin ="90px 0 30px 29%"; document.getElementById("respons").style.height ="500px"; document.getElementById("respons").style.overflowY ="scroll"; } function j(){ document.getElementById("respons").style.width ="768px"; document.getElementById("respons").style.margin ="90px 0 30px 21%"; document.getElementById("respons").style.height ="500px"; document.getElementById("respons").style.overflowY ="scroll"; } function k(){ document.getElementById("respons").style.width ="1024px"; document.getElementById("respons").style.margin ="90px 0 30px 12%"; document.getElementById("respons").style.height ="500px"; document.getElementById("respons").style.overflowY ="scroll"; } function l(){ document.getElementById("respons").style.width ="1190px"; document.getElementById("respons").style.margin ="90px 0 30px 7%"; document.getElementById("respons").style.height ="500px"; document.getElementById("respons").style.overflowY ="scroll"; } function m(){ document.getElementById("respons").style.width ="1300px"; document.getElementById("respons").style.margin ="70px 0 30px 2.5%"; document.getElementById("respons").style.height ="540px"; document.getElementById("respons").style.overflowY ="scroll"; }